<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>

<script type="text/javascript">
	function changeCity() {
		$.ajax({
			url : "/manager/loadCityInfo.html?cityIdAjax=" + $("#cityInfoSelect").val(),
			type : "POST",
			dataType : "json",
			async : false,
			success : function(selects) {
				$("#districtInfoSelect").empty();
				$("<option value='0'></option>").appendTo($("#districtInfoSelect"));
				$.each(selects.districtDetailList, function(i, districtBean) {
					$("<option value=" + districtBean.districtId + ">" + districtBean.localDistrictName + "</option>").appendTo($("#districtInfoSelect"));
				});
			}
		});
	}

	function changeDistrict() {
		$.ajax({
			url : "/manager/loadDistrictInfo.html?districtIdAjax=" + $("#districtInfoSelect").val(),
			type : "POST",
			dataType : "json",
			async : false,
			success : function(selects) {
				$("#streetInfoSelect").empty();
				$("<option value='0'></option>").appendTo($("#streetInfoSelect"));
				$.each(selects.streetDetailList, function(i, streetBean) {
					$("<option value=" + streetBean.streetId + ">" + streetBean.localStreetName + "</option>").appendTo($("#streetInfoSelect"));
				});
			}
		});
	}
</script>

<%-- 标题栏 --%>
<div class="title">
	<s:label cssClass="current fl" key="manager.serviceEdit.title" />
	<s:a href="/manager/home.html" cssClass="back fr">[<s:text name="common.button.back" />]</s:a>
	<s:a href="/manager/annEdit.html" cssClass="back pr5 fr">
		[<s:text name="manager.annEdit.title" />]
	</s:a>
	<span class="back pr5 fr">
		[<s:text name="manager.serviceEdit.title" />]
	</span>
	<s:a href="/manager/restEdit.html" cssClass="back pr5 fr">
		[<s:text name="manager.restEdit.title" />]
	</s:a>
	<div class="clear"></div>
	<hr class="title" />
</div>

<%-- 页面级错误信息 --%>
<div class="clear titleMessage">
	<s:actionmessage cssClass="fl" />
</div>

<%-- 页面内容 --%>
<div class="clear body p10">
	<div id="mapCanvas" class="clear w780 h480 fl" style="margin-top: 2px; margin-bottom: 5px; border: solid 1px #CCCCCC; background-color: #F2EFE9;"></div>
	<div class="side">
		<s:form action="doServiceEdit" method="post" theme="simple" cssClass="p0 m0">
			<s:token />
			<%-- 本餐厅地址 --%>
			<div class="row">
				<div class="cell-label w80">
					<s:label key="manager.serviceEdit.city"></s:label>:
				</div>
				<div class="cell-label w200">
					<s:select id="cityInfoSelect" name="restBean.cityId" list="cityDetailList" listKey="cityId" listValue="localCityName" headerKey="0" headerValue="" onchange="changeCity();"
						cssClass="vac w200" theme="simple" />
				</div>
			</div>
			<div class="row">
				<div class="cell-label w80">
					<s:label key="manager.serviceEdit.district"></s:label>:
				</div>
				<div class="cell-label w200">
					<s:select id="districtInfoSelect" name="restBean.districtId" list="districtDetailList" listKey="districtId" listValue="localDistrictName" headerKey="0" headerValue=""
						onchange="changeDistrict();" cssClass="vac w200" theme="simple" />
				</div>
			</div>
			<div class="row">
				<div class="cell-label w80">
					<s:label key="manager.serviceEdit.street"></s:label>:
				</div>
				<div class="cell-label w200">
					<s:select id="streetInfoSelect" name="restBean.streetId" list="streetDetailList" listKey="streetId" listValue="localStreetName" headerKey="0" headerValue=""
						cssClass="vac w200" theme="simple" />
				</div>
			</div>
			<div class="row">
				<div class="cell-label w80">
					<s:label key="manager.serviceEdit.longitude"></s:label>:
				</div>
				<div class="cell-label w200">
					<s:textfield id="longitude" name="restBean.longitude" cssClass="w200" readonly="true" />
				</div>
			</div>
			<div class="row">
				<div class="cell-label w80">
					<s:label key="manager.serviceEdit.latitude"></s:label>:
				</div>
				<div class="cell-label w200">
					<s:textfield id="latitude" name="restBean.latitude" cssClass="w200" readonly="true" />
				</div>
			</div>
			<div class="row">
				<div class="cell-label w80"></div>
				<div class="cell-label w200 p10">
					<s:submit name="save" method="save" key="common.button.save" cssClass="thinbtn3 w200" />
				</div>
			</div>
		</s:form>
	</div>
</div>

<%-- 显示地图 --%>
<s:if test="mapEngine == 'baidu'">
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=U1KGzDRuVK6UnRpj0H4tCWk5"></script>
	<script type="text/javascript">
		// 百度地图API功能
		// 创建Map实例
		var map = new BMap.Map("mapCanvas");
		// DB中的经纬度获取
		var longitude = '<s:property value="restBean.longitude"/>';
		var latitude = '<s:property value="restBean.latitude"/>';
		// 默认北京
		if (longitude == null || longitude == "") {
			longitude = 116.39722442626953;
			latitude = 39.9074977;
		}
		// 创建点坐标
		var point = new BMap.Point(longitude, latitude);
		// 初始化标记
		marker = new BMap.Marker(point);
		map.addOverlay(marker);
		// 初始化地图,设置中心点坐标和地图级别。
		map.centerAndZoom(point, 15);
		//启用滚轮放大缩小
		map.enableScrollWheelZoom();
		// 点击获取经纬度
		var marker;
		map.addEventListener("click", function(e) {
			// 设置经纬度
			$("#longitude").val(e.point.lng);
			$("#latitude").val(e.point.lat);
			// 创建标记
			map.removeOverlay(marker);
			marker = new BMap.Marker(new BMap.Point(e.point.lng, e.point.lat));
			map.addOverlay(marker);
		});
	</script>
</s:if>
<s:if test="mapEngine == 'google'">
	<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=zh_CN"></script>
	<script type="text/javascript">
		function initialize() {
			var myOptions = {
				zoom : 11,
				center : new google.maps.LatLng(30.1234567, 120.3456789),
				mapTypeId : google.maps.MapTypeId.ROADMAP
			};
			map = new google.maps.Map(document.getElementById("mapCanvas"), myOptions);
		}
		google.maps.event.addDomListener(window, "load", initialize);
	</script>
</s:if>